<%--
  Created by IntelliJ IDEA.
  User: 86156
  Date: 2023/9/9
  Time: 2:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>分类管理</title>
    <!-- 引入layui的css样式 -->
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 查询按钮 -->
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px">
        <div class="layui-inline">
            <input id="addBtn" type="button" value="新增" class="layui-btn"/>
            <input id="searchBtn" type="button" value="查询" class="layui-btn"/>
        </div>
    </div>
</form>

<!-- 查询 表格 -->
<table id="pTable"></table>

<!-- 新增 弹出窗口的模板 -->
<script id="template1" type="text/html">
<form class="layui-form" action="" lay-filter="form1">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-inline">
                <!-- 放置一个隐藏框 name="id" 可以被赋值
                新增的时候id没有值 编辑的时候id有值 -->
                <input type="hidden" name="id">
                <input type="text" name="name" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top:15px;margin-left:130px">
        <div class="layui-inline">
            <input id="resetBtn" type="button" value="重置" class="layui-btn"
                   style="background-color: white;color: black;border: 1px black"/>
            <input id="saveBtn" type="button" value="保存" class="layui-btn"/>
        </div>
    </div>
</form>
</script>

<!-- 引入layui的js文件-->
<script src="/layui/layui.js"></script>

<!-- 表格操作模板 被每一条数据反复使用 -->
<script id="template2" type="text/html">
    <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑"/>
    <input lay-event="delete" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="删除"/>
</script>

<script>
    //告诉浏览器加载layui框架中的哪些组件
    //加载完小组件就执行function
    layui.use(['table', 'layer', 'form'], function () {

        //第一步：先对加载的组件起名字，才能通过对象名调方法
        var table = layui.table;//操作表格
        var layer = layui.layer;//操作弹窗
        var $ = layui.jquery;//从layui中把jquery拿出来用
        var form = layui.form;//操作表单

        //查询
        $("#searchBtn").on("click", function () {
            table.render({
                elem: "#pTable",
                url: "/category?cmd=select",
                cols: [[
                    {title: "ID", field: "id"},
                    {title: "商品类别", field: "name"},
                    {title: "操作", templet: "#template2"}
                ]]
            });
        });

        //新增
        $("#addBtn").on("click", function () {
            //弹出窗口
            layer.open({
                title: "新增类型",
                type: 1,
                area: ['400px', '400px'],
                content: $("#template1").html()
            });
            //保存
            $("#saveBtn").on("click", function () {
                var data = form.val("form1");
                data.cmd = "save"
                $.post("/category", data, function () {
                    layer.closeAll();
                    layer.msg("保存成功");
                    $("#searchBtn").click();
                });
            });
        });

        //给表格操作（编辑/删除）绑事件
        table.on("tool", function (obj) {
            //定位行和列
            var event = obj.event;//obj内记录自定义的event值，用以区分不同操作
            var data = obj.data;//data表示该行所有数据  用以区别行

            //编辑
            if (event === "edit") {
                $.get("/category?cmd=selectById&id=" + data.id, function (category) {
                    layer.open({
                        title: "编辑商品",
                        type: 1,
                        area: ['400px', '400px'],
                        content: $("#template1").html()
                    });
                    form.val("form1", category);
                    $("#saveBtn").on("click", function () {
                        var data = form.val("form1");
                        data.cmd = "save";
                        $.post("/category", data, function () {
                            layer.closeAll();
                            layer.msg("保存成功");
                            $("#searchBtn").click();
                        });
                    });
                });
            }
            //删除
            if (event === "delete") {
                layer.confirm("确认删除？", function () {
                    $.post("/category", {cmd: "delete", id: data.id}, function () {
                        layer.closeAll();
                        layer.msg("删除成功");
                        $("#searchBtn").click();
                    })
                    //第三个函数 点击取消 自动关窗口
                }, function () {
                });
            }
        });
    });
</script>

</body>
</html>
